<script setup lang="ts">
import { ref } from "vue";
import { Setting, Bell, User, Notification } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

defineOptions({
  name: "CustomerServiceSettings"
});

const settings = ref({
  notifications: {
    newMessage: true,
    newRequest: true,
    sound: true,
    desktop: false
  },
  appearance: {
    theme: "light",
    fontSize: "medium"
  },
  autoReply: {
    enabled: false,
    message: "您好,我是客服助手,稍后为您服务"
  }
});

const handleSave = () => {
  ElMessage.success("设置已保存");
};

const handleReset = () => {
  ElMessage.info("设置已重置为默认值");
};
</script>

<template>
  <div class="settings-container">
    <div class="settings-header">
      <h1>客服工作台设置</h1>
      <p class="subtitle">配置您的客服工作台偏好设置</p>
    </div>

    <div class="settings-content">
      <el-row :gutter="20" class="mb-4">
        <el-col :span="12">
          <!-- 通知设置 -->
          <el-card class="settings-card h-full">
            <template #header>
              <div class="card-header">
                <el-icon><Bell /></el-icon>
                <span>通知设置</span>
              </div>
            </template>
            <el-form label-width="90px">
              <el-form-item label="新消息通知">
                <el-switch v-model="settings.notifications.newMessage" />
              </el-form-item>
              <el-form-item label="新请求通知">
                <el-switch v-model="settings.notifications.newRequest" />
              </el-form-item>
              <el-form-item label="声音提示">
                <el-switch v-model="settings.notifications.sound" />
              </el-form-item>
              <el-form-item label="桌面通知">
                <el-switch v-model="settings.notifications.desktop" />
                <el-text type="info" size="small">需要浏览器授权</el-text>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12">
          <!-- 外观设置 -->
          <el-card class="settings-card h-full">
            <template #header>
              <div class="card-header">
                <el-icon><Setting /></el-icon>
                <span>外观设置</span>
              </div>
            </template>
            <el-form label-width="90px">
              <el-form-item label="主题模式">
                <el-radio-group v-model="settings.appearance.theme">
                  <el-radio-button label="light">浅色</el-radio-button>
                  <el-radio-button label="dark">深色</el-radio-button>
                  <el-radio-button label="auto">跟随系统</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="字体大小">
                <el-radio-group v-model="settings.appearance.fontSize">
                  <el-radio-button label="small">小</el-radio-button>
                  <el-radio-button label="medium">中</el-radio-button>
                  <el-radio-button label="large">大</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>

      <!-- 自动回复 -->
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <el-icon><Notification /></el-icon>
            <span>自动回复</span>
          </div>
        </template>
        <el-form label-width="100px">
          <el-form-item label="启用自动回复">
            <el-switch v-model="settings.autoReply.enabled" />
          </el-form-item>
          <el-form-item label="回复内容">
            <el-input
              v-model="settings.autoReply.message"
              :disabled="!settings.autoReply.enabled"
              type="textarea"
              :rows="3"
              placeholder="请输入自动回复内容..."
            />
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 账号信息 -->
      <el-card class="settings-card">
        <template #header>
          <div class="card-header">
            <el-icon><User /></el-icon>
            <span>账号信息</span>
          </div>
        </template>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="用户名">admin</el-descriptions-item>
          <el-descriptions-item label="角色">客服人员</el-descriptions-item>
          <el-descriptions-item label="邮箱">admin@example.com</el-descriptions-item>
          <el-descriptions-item label="上次登录">2025-11-07 10:30:00</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- 操作按钮 -->
    <div class="settings-footer">
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleSave">保存设置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.settings-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f7fa;

  .settings-header {
    padding: 24px 24px 16px;
    background: white;
    border-bottom: 1px solid #e4e7ed;

    h1 {
      margin: 0 0 8px;
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }

    .subtitle {
      margin: 0;
      font-size: 14px;
      color: #909399;
    }
  }

  .settings-content {
    padding: 18px 0;

    .settings-card {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .card-header {
        display: flex;
        gap: 8px;
        align-items: center;
        font-weight: 600;
      }

      :deep(.el-form-item) {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .settings-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    background: white;
    border-top: 1px solid #e4e7ed;
  }
}
</style>
